<template>
    <div class='sense'>
      <div class="nav" @click="showpic">
          <div :style="opacityStyle" ref="fixed" class='fix'>景点详情</div>
          <span  @click.stop="back" class='iconfont icon-fanhui back'></span>
          <img src="//img1.qunarzz.com/sight/p0/1508/89/895a1b7add84f23faca053ce9e3153db.water.jpg_600x330_93d96bdf.jpg" alt="">
          <div class="navinfo">
              <div  class="title">
                  北京欢乐谷(AAAA景区)
              </div>
              <div class="num"> <span class='iconfont numicon'>&#xe616;</span> 36</div>
          </div>
      </div>
      <pic @open='light' v-if="ispic"></pic>
      <div class="ty"></div>
    </div>
</template>


<script>
import pic from './pic'
    export default{
        data(){
            return{
                    ispic:false,
                    opacityStyle:{
                        opacity:0
                    },
                    hu:158  
            }
        },
        components:{
            pic
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            showpic(){
                this.ispic=true;
                console.log(111)
            },
            light(){
                 this.ispic=false;
            },
            scroll(){
                var scrollPosition = '' 
                var that = this
               document.addEventListener('scroll',function  (e) {
               scrollPosition=e.target.scrollingElement.scrollTop
                if(scrollPosition>=60 && scrollPosition<=140){
                    //  console.log((parseInt(scrollPosition))/140)
                     console.log((parseInt(scrollPosition)))
                     that.opacityStyle={
                         opacity:(parseInt(scrollPosition))/140
                     }         
                }if(scrollPosition>140){
                      that.opacityStyle={
                         opacity:1
                     }         
                }
                else{
                     that.opacityStyle={
                         opacity:(parseInt(scrollPosition))/140||0
                     }         
                }
                    })
            }
            
        },
        activated() {
              this.scroll()
              
        },
        deactivated() {
            document.removeEventListener('scroll',this.scroll())
        },
        mounted() {
           
        }
        
       
    }
</script>


<style lang="scss" scoped>
.numicon{
     font-size: .18rem;
}
.sense{
    .nav{
         width: 100%;
          height: 55vw;
        background-color: #ccc;   
        position: relative;
        .back{
             text-align: center;
            width: 0.4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            position: absolute;
            top: 0.28rem;
            left: 0.28rem;
            background-color: rgba(0,0,0,0.8);
            border-radius: 48%;
            color: #ccc;   
        }
        .fix{
            width: 100%;
            position: fixed;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            background-color: #16BFC7;
            opacity: 0;
        }
        img{
            width: 100%;
        }
        .navinfo{
            width: 100%;
            position: absolute;
            bottom: 0.3rem;
            display: flex;
            z-index: 2;
            color: green;
            justify-content: space-between;
            align-items: center;
            background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
            .title{
                font-size: .36rem;
                height: .4rem;
                line-height: .4rem;
                color: #fff;
                padding-left: 0.3rem;
            }
            .num{
                 font-size: .18rem;
                height: .4rem;
                line-height: .4rem;
                color: #fff;
                padding-right: 0.2rem;
            }
        }
    }
    .ty{
        height: 50rem;
        background-color: green;
        width: 100%;
    }
}
</style>

